<template>
  <div>
    <h1>header动画</h1>
    <!-- 使用transition来抱住需要动画的 -->
    <button @click="go">动画切换</button>
    <!-- 这种直接写的时未命名动画 需要加name才能使它成为命名动画  并在动画类的前缀把v-改成name对应的前缀 -->
    <transition name="one">
      <h3 v-show="flag">我是动画展示的效果</h3>
    </transition>
    <button @click="out">动画切换</button>
    <!-- 这种直接写的时未命名动画 需要加name才能使它成为命名动画  并在动画类的前缀把v-改成name对应的前缀 -->
    <transition name="two">
      <h3 v-show="zero">我是动画展示的效果</h3>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      flag: true,
      zero: true,
    };
  },
  methods: {
    go() {
      this.flag = !this.flag;
    },
    out() {
      this.zero = !this.zero;
    },
  },
};
</script>

<style>
/* 在这里写动画的样式 */
/* 离开的状态 和进入的状态 */
.one-enter,
.one-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
.one-enter-active,
.one-leave-active {
  transition: all 1s linear;
}
/* 过渡动画
.v-enter-active控制元素再进入时动画效果如何呈现
.v-leave-active 控制元素再离开时动画效果如何呈现
 */
/* Vue封装的关键帧动画 */
@keyframes donghua {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-200px);
  }
}
.two-enter-active {
  animation: 1s donghua linear reverse;
}
.two-leave-active {
  animation: 1s donghua linear ;
}
</style>